<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 为什么新增块级作用域

        function fn() {
            for (var i = 0; i <= 3; i++) {
                console.log(i)
            }
            console.log('--------------------')
            console.log(i)
        }
        fn()
        console.log('---------------------')
        console.log(i)

        // 思考：为什么新增块级作用域

        // 1. 问题1 
        var temp = new Date()
        function fn() {
            console.log(temp)
            if (false) {  // if是语句
                var temp = 'hello world'
            }
        }
        fn()

        //==>
        // function fn(){
        //     // 1. var 声明的变量会提升到当前作用域的最前面
        //     // 2. if是语句，不是函数，var声明变量不能形成作用域
        //     // 3. var 声明的变量，只声明，不赋值，默认是undefined
        //     var temp
        //     console.log(temp)  
        //     if(false){  // if是语句
        //         temp = 'hello world'
        //     }
        // }

        // 2. var声明的变量，在for循环中，提升到全局
        for (var i = 0; i <= 3; i++) {
            console.log(i)
        }
        // 最后循环完，i++， i变为4 
        console.log(i)

        // 总结一下：
        // ==>  if / for 不是函数，他们是语句，用var声明的变量，不能形成作用域；

        // 为什么需要块级作用域
        // var变量
        // 1. 内层变量可能覆盖外层变量
        // 2. 用来计数的循环变量i，会泄漏为全局变量
    </script>
</body>

</html>